<template>
  <div class="singer-intro">
    <div class="basic">
      <span v-for="(item, index) in Bitem" :key="index">
        {{ item.key + "：" + (item.value.length > item.maxLength ? item.value.slice(0, item.maxLength) + '...' : item.value) }}
        <button v-show="(item.value.length > 50)" @click="toggleExpand('Bitem',index)">
          {{ expandedStatesBitem[index] ? "收回" : "查看更多" }}
        </button>
        <br>
      </span>
    </div>
    <div class="desc">
      <h4>音乐生平：</h4>
      <div>{{ this.desc }}</div>
    </div>
    <div class="other">
      <span v-for="(item, index) in Oitem" :key="index">
        {{ item.key + "：" + (item.value.length > item.maxLength ? item.value.slice(0, item.maxLength) + '...' : item.value) }}
        <button v-show="item.value.length > 50" @click="toggleExpand('Oitem',index)">
          {{ expandedStatesOitem[index] ? "收回" : "查看更多" }}
        </button>
        <br>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["singerMid"],
  data() {
    return {
      Bitem: [],
      desc: "",
      Oitem: [],
      expandedStatesBitem: {}, // 用于存储 Bitem 的展开状态
      expandedStatesOitem: {}, // 用于存储 Oitem 的展开状态
    }
  },
  methods: {
    getDetail() {
      this.$request('get', '/singer/desc', {
        singermid: this.singerMid
      }).then(res => {
        // console.log(res);
        if (res.result == 100) {
          this.Bitem = res.data.basic.item.map(item => ({ ...item, maxLength: 50 }));
          this.desc = res.data.desc
          this.Oitem = res.data.other.item.map(item => ({ ...item, maxLength: 50 }));
        }
      })
    },
    toggleExpand(type,index) {
      // const expandedStates = type === 'Bitem' ? this.expandedStatesBitem : this.expandedStatesOitem;
      // this.$set(expandedStates, index, !expandedStates[index]);
      // this.maxLength = expandedStates[index] ? Infinity : 50; //切换显示长度

      const expandedStates = type === 'Bitem' ? this.expandedStatesBitem : this.expandedStatesOitem;
      this.$set(expandedStates, index, !expandedStates[index]);
      const items = type === 'Bitem' ? this.Bitem : this.Oitem;
      items[index].maxLength = expandedStates[index] ? Infinity : 50; // 切换显示长度
    }
  },
  mounted() {
    this.getDetail();
    this.Bitem.forEach((item, index) => {
      this.$set(this.expandedStatesBitem, index, false);
    });
    this.Oitem.forEach((item, index) => {
      this.$set(this.expandedStatesOitem, index, false)
    })
  }
}
</script>

<style scoped>
.basic>span {
  width: 95%;
  display: inline-block;
  margin: 0.15rem 0;
  font-size: 0.9rem;
  text-align: left;
}

button {
  background: none;
  border: none;
  color: rgb(123, 123, 139);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  text-decoration: underline;
  margin-top: 0.5rem;
  transition: color 0.2s, background-color 0.2s;
}

.desc>div {
  display: inline-block;
  width: 95%;
  margin-bottom: 4rem;
}

.other>span {
  width: 95%;
  display: inline-block;
  margin: 0.15rem 0;
  font-size: 0.9rem;
  text-align: left;
  margin-bottom: 1rem;
}
</style>
